<template>
  <div class="bg-white p-6 rounded-lg shadow-md w-full max-w-md">
    <h3 class="text-xl font-semibold text-base-text mb-4">
      {{ isEdit ? 'Edit Course' : 'Add Course' }}
    </h3>

    <form @submit.prevent="handleSubmit">
      <!-- New: Start Date -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Start Date <span class="text-red-500">*</span>
        </label>
        <input
          type="date"
          v-model="courseForm.startDate"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
        >
        <p class="text-red-500 text-xs mt-1" v-if="errors.startDate">{{ errors.startDate }}</p>
      </div>

      <!-- New: End Date -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          End Date <span class="text-red-500">*</span>
        </label>
        <input
          type="date"
          v-model="courseForm.endDate"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
        >
        <p class="text-red-500 text-xs mt-1" v-if="errors.endDate">{{ errors.endDate }}</p>
      </div>

      <!-- Original: Course Name -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Course Name <span class="text-red-500">*</span>
        </label>
        <input
          type="text"
          v-model="courseForm.name"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
          placeholder="For example, software development management"
        >
        <p class="text-red-500 text-xs mt-1" v-if="errors.name">{{ errors.name }}</p>
      </div>

      <!-- Original: Teacher's Name -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Teacher's Name <span class="text-red-500">*</span>
        </label>
        <input
          type="text"
          v-model="courseForm.teacher"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
          placeholder="For example, Teacher Zhang"
        >
        <p class="text-red-500 text-xs mt-1" v-if="errors.teacher">{{ errors.teacher }}</p>
      </div>

      <!-- Original: Day of the Week -->
      <div class="mb-4">
        <label class="block text-sm font-medium text-gray-700 mb-1">
          Day of the week <span class="text-red-500">*</span>
        </label>
        <select
          v-model="courseForm.day"
          class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
        >
          <option value="">Please choose a day</option>
          <option value="1">Monday</option>
          <option value="2">Tuesday</option>
          <option value="3">Wednesday</option>
          <option value="4">Thursday</option>
          <option value="5">Friday</option>
        </select>
        <p class="text-red-500 text-xs mt-1" v-if="errors.day">{{ errors.day }}</p>
      </div>

      <!-- Original: Start time&End time -->
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            Start time <span class="text-red-500">*</span>
          </label>
          <input
            type="time"
            v-model="courseForm.startTime"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
            step="900" 
          >
          <p class="text-red-500 text-xs mt-1" v-if="errors.startTime">{{ errors.startTime }}</p>
        </div>

        <div>
          <label class="block text-sm font-medium text-gray-700 mb-1">
            End time <span class="text-red-500">*</span>
          </label>
          <input
            type="time"
            v-model="courseForm.endTime"
            class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-course-default"
            step="900"
          >
          <p class="text-red-500 text-xs mt-1" v-if="errors.endTime">{{ errors.endTime }}</p>
        </div>
      </div>

      <!-- Original: Operation buttons -->
      <div class="flex gap-3 mt-6">
        <button
          type="submit"
          class="flex-1 bg-course-default text-white py-2 px-4 rounded-md hover:bg-course-default/90 transition-colors"
        >
          {{ isEdit ? 'Update Course' : 'Add Course' }}
        </button>
        <button
          type="button"
          @click="handleCancel"
          class="flex-1 bg-gray-200 text-gray-700 py-2 px-4 rounded-md hover:bg-gray-300 transition-colors"
        >
          Cancel
        </button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { validateCourseForm } from '@/utils/validation'

const props = defineProps({
  isEdit: {
    type: Boolean,
    default: false
  },
  editCourse: {
    type: Object,
    default: () => null
  }
})

const courseForm = ref({
  name: '',
  teacher: '',
  startDate: '', // New: Start Date Field
  endDate: '',   // New: End Date Field
  day: '',
  startTime: '',
  endTime: ''
})

// In editing mode, synchronize the course data passed in by the parent component
watch(() => props.editCourse, (newVal) => {
  if (newVal && props.isEdit) {
    courseForm.value = { ...newVal }
  }
}, { immediate: true })

const errors = ref({})
const emit = defineEmits(['submit', 'cancel'])

// Form submission logic
const handleSubmit = () => {
  const { isValid, errors: validateErrors } = validateCourseForm(courseForm.value)
  errors.value = validateErrors
  if (!isValid) return 

  emit('submit', courseForm.value)

  // Reset form in new mode
  if (!props.isEdit) {
    courseForm.value = { 
      name: '', 
      teacher: '', 
      startDate: '', 
      endDate: '', 
      day: '', 
      startTime: '', 
      endTime: '' 
    }
  }
}

// Cancel button logic
const handleCancel = () => {
  emit('cancel')
}
</script>